ngView
( directive in module ng
)
ngView
is a directive that complements the $route
service by
including the rendered template of the current route into the main layout ( index.html
) file.
Every time the current route changes, the included view changes with it according to the
configuration of the $route
service.
Additionally, you can also provide animations via the ngAnimate attribute to animate the enter and leave effects.
<ng-view> </ng-view>as attribute
<ANY ng-view> ... </ANY>as class
<ANY class="ng-view"> ... </ANY>
Emitted every time the ngView content is reloaded.
<div
ng-view
class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}">
$location.path() = {{main.$location.path()}}
$route.current.templateUrl = {{main.$route.current.templateUrl}}
$route.current.params = {{main.$route.current.params}}
$route.current.scope.name = {{main.$route.current.scope.name}}
$routeParams = {{main.$routeParams}}
Book Id: {{book.params.bookId}}
Book Id: {{chapter.params.bookId}}
Chapter Id: {{chapter.params.chapterId}}
.example-animate-container { position:relative; height:100px; }
.example-animate-container > * { display:block; width:100%; border-left:1px solid black;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.example-enter-setup { left:100%; } .example-enter-setup.example-enter-start { left:0; }
.example-leave-setup { } .example-leave-setup.example-leave-start { left:-100%; }
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($route, $routeParams, $location) { this.$route = $route; this.$location = $location; this.$routeParams = $routeParams; }
function BookCntl($routeParams) { this.name = "BookCntl"; this.params = $routeParams; }
function ChapterCntl($routeParams) { this.name = "ChapterCntl"; this.params = $routeParams; }
element('a:contains("Scarlet")').click();
content = element('.doc-example-live [ng-view]').text();
expect(content).toMatch(/controller\: BookCntl/);
expect(content).toMatch(/Book Id\: Scarlet/);
});